<template>
  <div class="setrole">
    <el-dialog
      :title="'为[' + roleName + ']分配权限'"
      :visible="show"
      @close="cancle"
    >
      <el-tree
        ref="mytree"
        :data="list"
        default-expand-all
        show-checkbox
        node-key="id"
        check-strictly
        expand-on-click-node
        :props="{ label: 'name' }"
      ></el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button @click="submit" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAllPerApi } from "@/api/permission";
import { getDeatilByIdApi, setRoleApi } from "@/api/roles";
export default {
  props: ["show"],
  data() {
    return {
      roleName: "人事经理",
      // 树形组件的数据源
      list: [],
      // 当前角色的详情
      roleDetail: {}
    };
  },
  methods: {
    // 根据 id 得到当前角色对应的权限
    async getRightById(id) {
      const res = await getDeatilByIdApi(id);
      // 得到当前角色的详情
      this.roleDetail = res;
      // 动态设置树形结构选中的节点
      this.$refs.mytree.setCheckedKeys(res.permIds);
    },
    // 得到所有的权限点列表
    async getAllPermission() {
      const res = await getAllPerApi();
      // 保存&转换数据
      this.list = this.trueData(res, "0");
    },
    // 将数据转为树状结构
    trueData(arr, pid) {
      var newArr = [];
      arr.forEach(item => {
        if (item.pid === pid) {
          item.children = this.trueData(arr, item.id);
          newArr.push(item);
        }
      });
      return newArr;
    },
    cancle() {
      // 关闭面板
      this.$emit("update:show", false);
    },
    async submit() {
      // 得到当前选中的权限的 id 集合
      var ids = this.$refs.mytree.getCheckedKeys();
      // 提交权限数据到服务器
      await setRoleApi({
        id: this.roleDetail.id,
        permIds: ids
      });
      // 关闭面板
      this.$emit("update:show", false);
      // 提示修改成功
      this.$message.success("设置权限成功");
    }
  },
  created() {
    this.getAllPermission();
  }
};
</script>

<style lang="scss" scoped>
.setrole {
}
</style>
